<template>
  <div class="mobileStep5">
    <h1>
      <i class="left"></i>
      <span>我们努力帮你解决难点</span>
      <i class="right"></i>
    </h1>
    <div class="box" v-for="(item, index) in textArr" :key="index">
      <div class="index">
        <span>{{ item.index }}</span>
      </div>
      <h2 class="title">
        {{ item.title }}
        <strong>{{ item.titleStrong }}</strong>
      </h2>
      <ul class="list">
        <li v-for="(m ,i) in item.list" :key="i">
          <h6>
            {{ m.title }}
            <strong v-if="m.titleStrong">{{ m.titleStrong }}</strong>
          </h6>
          <p>{{ m.text }}</p>
          <p v-if="m.textBr">{{ m.textBr }}</p>
        </li>
      </ul>
      <img class="boxBg" :class="{ 'smBgimg': (item.index == 3) || (item.index == 4) }" :src="item.bgImg" alt="bg">
    </div>
    <img class="backgroundImg" :src="h5_5" alt="bg5">
    <!-- <div class="useNow">
      <div class="useBtn" @click="goWhere('mobileReg')">
        <span>立即试用</span>
        <em>
          <i></i>
        </em>
      </div>
    </div> -->
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  name: 'mobileStep5',
  data () {
    return {
      h5_5: require('@/assets/images/mobile/h5_4.png'),
      textArr: [
        {
          index: 3,
          title: '我们做到帮你',
          titleStrong: '保品质',
          bgImg: require('@/assets/images/mobile/box3.png'),
          list: [
            {
              title: '我们只做正品',
              text: '同样价格 在求礼品能给你更好的选择',
              textBr: '同样品质 在求礼品能给你最低的价格'
            }
          ]
        },
        {
          index: 4,
          title: '我们希望礼品给到你',
          titleStrong: '更多选择',
          bgImg: require('@/assets/images/mobile/box2.png'),
          list: [
            {
              title: '非配重礼品',
              text: '棉签、垃圾袋、夹子等'
            },
            {
              title: '可配重礼品',
              text: '洗衣液、洗手液、洗洁精等'
            },
            {
              title: '高端礼品',
              text: '湿巾、清风抽纸、维达抽纸、数据线、智能音箱等'
            }
          ]
        }
      ]
    }
  },
  methods: {
    goWhere (route) {
      this.$router.push({ name: route, query: this.$route.query })
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.mobileStep5
  transition all 0.6s
  position absolute
  top 0
  left 0
  // width 100%
  width 100%
  height 100%
  padding 1rem 1.5rem
  overflow hidden
  box-sizing border-box
  .backgroundImg
    position absolute
    bottom 0
    right 0
    left 0
    margin 0 auto
    min-width 100%
    height 100%
    z-index -1
  h1
    margin-top 0rem
    font-size 1.9rem
    line-height 2.6rem
    color #ffffff
    display flex
    justify-content center
    align-items center
    i
      position relative
      margin 0 1.3rem
      width 0.8rem
      height 1px
      background #ffffff
      &:before
        content ''
        position absolute
        right 0
        top -0.5rem
        width 1.5rem
        height 1px
        background #ffffff
      &:after
        content ''
        position absolute
        right 0
        bottom -0.5rem
        width 1.5rem
        height 1px
        background #ffffff
    .right
      &:before
        left 0
      &:after
        left 0
  .box
    margin-top 1.7rem
    background rgba(255, 255, 255, 1)
    border-radius 0.4rem
    position relative
    overflow hidden
    .boxBg
      position absolute
      right 0
      bottom 0
      width 40%
      opacity 0.12
    .smBgimg
      width 25%
    .index
      position absolute
      width 7.4rem
      height 7.4rem
      border-radius 50%
      top -3.7rem
      left -3.7rem
      background #B72E5A
      span
        position absolute
        left 65%
        bottom 10%
        font-size 1.9rem
        line-height 2.6rem
        color #ffffff
        font-weight bold
    .title
      height 3.7rem
      line-height 3.7rem
      padding-left 4rem
      font-size 1.3rem
      color #333333
      strong
        font-size 1.7rem
        color #D64A75
        font-weight bold
    .list
      padding 0.9rem 1.3rem
      li
        margin-bottom 0.7rem
        h6
          font-size 1.3rem
          line-height 1.8rem
          color #333333
          margin-bottom 0.4rem
          font-weight bold
          strong
            font-size 1.3rem
            line-height 1.8rem
            color #D64A75
            font-weight bold
        p
          font-size 1.1rem
          line-height 1.5rem
          color #666666
  .useNow
    margin-top 2.2rem
    margin-bottom 1rem
    display flex
    justify-content center
    height 4.3rem
    .useBtn
      width 50%
      height 4.3rem
      display flex
      justify-content center
      align-items center
      line-height 4.3rem
      text-align center
      border-radius 2.2rem
      background linear-gradient(270deg, rgba(210, 95, 58, 1) 0%, rgba(243, 184, 100, 1) 100%)
      box-shadow 1px 3px 10px -3px rgba(0, 0, 0, 0.47)
      span
        font-size 1.9rem
        color #ffffff
        font-weight bold
        margin-right 1rem
      em
        position relative
        width 2.9rem
        height 2.9rem
        border-radius 50%
        background #B44624
        i
          position absolute
          top 0
          bottom 0
          right 0
          left 0
          margin auto
          width 60%
          height 2px
          border-radius 1px
          background #ffffff
          &:after
            content ''
            position absolute
            right 0
            top -3px
            width 6px
            height 6px
            border-top 2px solid #ffffff
            border-right 2px solid #ffffff
            border-radius 1px
            transform rotate(45deg)
</style>
